<template>
  <view class="content">
    <view class="status_bar">
    </view>
    <!-- 自定义状态栏 -->
    <view class="status_title">
      <image class="img1" @click="companyIntroduction" src="@/static/images/logo.png" mode=""></image>
      <view class="search">
        <u-search :show-action="false" borderColor="#7A7DEE" bgColor="#FFFFFF" placeholder="輸入關鍵字搜索"
                  v-model="keyword" @focus="toSearch"></u-search>
      </view>
      <view class="news" @click="toquote">
        <image class="img2" src="@/static/images/quotationcar.png" mode="">

        </image>
        <view style="font-size: 20rpx">報價車</view>
        <view class="red-news" v-if="quotenums>0">
          {{ quotenums }}
        </view>
      </view>
    </view>
    <swiper class="swiper-box" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
            :duration="duration" circular="true">
      <swiper-item v-for="(item, index) in bannerList" :key="index">
        <view class="swiper-item">
          <image class="image" :src="item.image" mode="aspectFill" @click="toplist(item)"/>
        </view>
      </swiper-item>
    </swiper>
    <view class="title" @click="toclass('0')">
      <view class="good-cate">
        商品分類
      </view>
      <view class="all">
        <view class="all-text">
          查看全部
        </view>
        <u-icon size="28rpx" name="arrow-right"></u-icon>
      </view>
    </view>
    <view class="goot-item">
      <u-row justify="space-between">
        <u-col span="3">
          <view class="demo-layout " @click="toclass('0')">
            <image class="img-one" src="../../static/images/paper_icn.png" mode=""></image>
            <text>紙類</text>
          </view>
        </u-col>
        <u-col span="3">
          <view class="demo-layout " @click="toclass('1')">
            <image class="img-one" src="../../static/images/stationery_icn.png" mode=""></image>
            <text>辦公文具</text>
          </view>
        </u-col>
        <u-col span="3">
          <view class="demo-layout " @click="toclass('2')">
            <image class="img-one" src="../../static/images/pen_icn.png" mode=""></image>
            <text>筆類</text>
          </view>
        </u-col>
        <u-col span="3">
          <view class="demo-layout " @click="toclass('3')">
            <image class="img-one" src="../../static/images/computer_icn.png" mode=""></image>
            <text>計算機類</text>
          </view>
        </u-col>
      </u-row>
    </view>
    <!-- 商品分类 -->
    <view class="title">
      <view class="good-cate">
        熱門專區
      </view>
    </view>
    <view class="goot-item">
      <u-row justify="space-between">
        <!-- 新品上市 -->
        <u-col span="4">
          <view class="demo-layout" @click="tolist('a.is_new')">
            <image class="img-two" src="../../static/images/new_bg.png" mode=""></image>
          </view>
        </u-col>
        <!--  -->
        <u-col span="4">
          <view class="demo-layout " @click="tolist('a.is_promote')">
            <image class="img-two" src="../../static/images/discounts_bg.png" mode=""></image>
          </view>
        </u-col>
        <u-col span="4">
          <view class="demo-layout " @click="tolist('a.is_hot')">
            <image class="img-two" src="../../static/images/hot_bg.png" mode=""></image>
          </view>
        </u-col>
      </u-row>
    </view>
    <view class="title">
      <view class="good-cate">
        人氣商品
      </view>
      <view class="all" @click="toAll('人氣商品',hotList)">
        <view class="all-text">
          查看全部
        </view>
        <u-icon size="28rpx" name="arrow-right"></u-icon>
      </view>
    </view>
    <!-- 滚动 -->
    <scroll-view class="good_cover" scroll-x="true">
      <view class="good-item" v-for="(item,index) in hotList" :key="index"
            @click="$store.dispatch('toDetails',item.goods_id)">
        <view class="item-top">
          <image :src="getFirstImageLink(item.goods_images)" mode="aspectFit"></image>
        </view>
        <view class="item-center">
          {{ item.goods_name }}
        </view>
        <view class="item-bottom">
          <!--          MOP {{ item.shop_price }}-->
        </view>
      </view>
    </scroll-view>
    <view class="banner">
      <image src="../../static/images/banner(1).png" mode=""></image>
    </view>
    <view class="title">
      <view class="good-cate">
        猜你喜歡
      </view>
      <view class="all" @click="toAll('猜你喜歡',recommend)">
        <view class="all-text">
          查看全部
        </view>
        <u-icon size="28rpx" name="arrow-right"></u-icon>
      </view>
    </view>
    <goodCard :goodlist="recommend"/>
  </view>

</template>

<script>
import {
  getBanner,
  gethotgoods,
  recommend
} from '@/network/api/home.js'
import {
  mapActions,
  mapState,
} from 'vuex'
import goodCard from "@/components/goodCard.vue"

export default {
  data() {
    return {
      title: 'Hello',
      keyword: '',
      // 轮播图
      bannerList: [],
      hotList: [],
      indicatorDots: true,
      autoplay: true,
      interval: 2000, //切换的间隔时间
      duration: 500, //滑动动画时长
      recommend: []
    }
  },
  components: {
    goodCard
  },
  computed: {
    ...mapState({
      quotenums: state => state.user.quotenums,
    })
  },
  onLoad() {
    this.getBanner()
    this.gethotgoods()
  },
  onShow() {
    this.getrecommend()
    this.getQuoteCart()
  },
  methods: {
    toAll(title,list) {
      console.log(123)
      console.log(list)
      uni.navigateTo({
        url: `/pages/index/all?title=${title}&list=${JSON.stringify(list)}`
      })
    },
    tolist(item) {
      uni.navigateTo({
        url: `/pages/classify/search/result?priority=${item}`
      })
    },
    ...mapActions(['getQuoteCart']),
    toquote() {
      uni.navigateTo({
        url: '/pages/quotacar/index'
      })
    },
    async getrecommend() {
      const res = await recommend()
      this.recommend = res.data.goods
    },
    toclass(item) {
      uni.$emit('active', {
        active: item
      });
      uni.switchTab({
        url: `/pages/classify/index`
      })
    },
    toplist(item) {
      console.log(item);
      if (!item.url) return
      if (item.name == "立邦") {
        item.name = "犀利"
      }
      uni.navigateTo({
        url: `/pages/classify/search/result?keyword=${item.name}`
      })
    },
    toSearch() {
      // Replace 'TargetPage' with the page name you want to navigate to
      uni.navigateTo({
        url: '/pages/classify/search/index',
      });
    },
    getFirstImageLink(links) {
      const linksArray = links.split(",");
      return linksArray[0]
    },
    async getBanner() {
      const res = await getBanner()
      this.bannerList = res.data.carousellist
    },
    // 获取人气商品
    async gethotgoods() {
      const res = await gethotgoods()
      console.log(res);
      this.hotList = res.data.goods
    },
    companyIntroduction() {
      uni.navigateTo({
        url: '/pages/mine/setting/about/index'
      })

    }
  }
}
</script>

<style lang="scss">
/* 自定义状态栏 */
.content {
  width: 100vw;
  overflow-x: hidden;
}

.status_bar {
  height: var(--status-bar-height);
  width: 100vw;
}

/* 自定义导航栏 */
.status_title {
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100vw;
  height: 88rpx;
  padding: 15rpx 44rpx;
  background-color: #FFFFFF;

  .img1 {
    width: 68rpx;
    height: 68rpx;
  }

  .search {
    width: 486rpx;
  }

  .news {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;

    .img2 {
      width: 40rpx;
      height: 40rpx;
    }

    .red-news {
      position: absolute;
      top: -10%;
      right: -35%;
      padding: 0 5rpx;
      // width: 42rpx;
      height: 34rpx;
      background: #ED1B37;
      opacity: 1;
      border-radius: 17rpx;
      text-align: center;
      line-height: 34rpx;
      font-size: 14rpx;
      color: #FFFFFF;
    }
  }
}

.swiper-box {
  width: 662rpx;
  margin: 42rpx auto;
  /* width: 95%; */
  height: 312rpx;
  overflow: hidden;
}

.swiper-item {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  border-radius: 15rpx;
  /* app上运行不显示图片，就需要加下面这行，设置高度 */
  height: 312rpx;
}

.image {
  /* width: 750rpx; */
  width: 100%;
  height: 312rpx;
  border-radius: 15rpx;
}

.title {
  margin: 32rpx 44rpx;
  display: flex;
  justify-content: space-between;

  .good-cate {
    font-size: 34rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
  }

  .all {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #999999;

    .all-text {
      line-height: 20rpx;
      margin-right: 3rpx;
    }
  }
}

.good_cover {
  margin-left: 44rpx;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;

  .good-item {
    margin-right: 20rpx;
    display: inline-block;
    width: 270rpx;
    overflow: auto;

    .item-top {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 270rpx;
      background: #FFFFFF;
      border: 1px solid #DEDEDE;
      border-radius: 30rpx;

      image {
        max-width: 222rpx;
        max-height: 222rpx
        // height: 222rpx;
      }
    }

    .item-center {
      margin: 16rpx 0;
      min-height: 64rpx;
      white-space: pre-wrap;
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #333333;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      /* Show up to 2 lines of content */
      -webkit-box-orient: vertical;
    }

    .item-bottom {
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #4949C3;
    }
  }
}

.banner {
  width: 662rpx;
  height: 270rpx;
  margin: 60rpx auto;

  image {
    width: 662rpx;
    height: 270rpx;
  }
}

.goot-item {
  margin: 0 44rpx;

  .demo-layout {
    // text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    .img-one {
      width: 128rpx;
      height: 128rpx;
    }

    .img-two {
      width: 210rpx;
      height: 210rpx;
    }

    text {
      padding-top: 12rpx;
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #333333;
    }
  }
}
</style>
